import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import { regionalstats } from '@/common/types';
import useWindowWidth from '@/hooks/event/use-window-width';



interface ProvinceData {
  name: string;
  value: number;
}

type Props = {
  data: regionalstats[];
};

const HongKongMap = ({ data }: Props) => {
  const { isPc } = useWindowWidth();


  console.log("report.tsx============", data);

  // 省份名称映射函数
  const normalizeProvinceName = (region: string): string => {
    const mapping: Record<string, string> = {
      '北京市': '北京',
      '天津市': '天津',
      '上海市': '上海',
      '重庆市': '重庆',
      '河北省': '河北',
      '山西省': '山西',
      '辽宁省': '辽宁',
      '吉林省': '吉林',
      '黑龙江省': '黑龙江',
      '江苏省': '江苏',
      '浙江省': '浙江',
      '安徽省': '安徽',
      '福建省': '福建',
      '江西省': '江西',
      '山东省': '山东',
      '河南省': '河南',
      '湖北省': '湖北',
      '湖南省': '湖南',
      '广东省': '广东',
      '海南省': '海南',
      '四川省': '四川',
      '贵州省': '贵州',
      '云南省': '云南',
      '陕西省': '陕西',
      '甘肃省': '甘肃',
      '青海省': '青海',
      '台湾省': '台湾',
      '内蒙古自治区': '内蒙古',
      '广西壮族自治区': '广西',
      '西藏自治区': '西藏',
      '宁夏回族自治区': '宁夏',
      '新疆维吾尔自治区': '新疆',
      '香港特别行政区': '香港',
      '澳门特别行政区': '澳门',
      '港澳台': '香港' // 特殊处理港澳台
    };

    return mapping[region] || region;
  };

  const chartRef = useRef<HTMLDivElement>(null);



  useEffect(() => {
    if (!chartRef.current) return;

    const myChart = echarts.init(chartRef.current);
    myChart.showLoading();

    // 1. 从public目录加载香港地图数据
    fetch('/chinav2.json')
      .then(response => response.json())
      .then(geoJson => {
        myChart.hideLoading();

        // 修正南海诸岛的 GeoJSON 数据
        const southChinaSeaIslands = {
          "type": "Feature",
          "properties": {
            "name": "南海诸岛",
            "cp": [114.2, 15.8],
            "childNum": 1
          },
          "geometry": {
            "type": "Polygon",
            "coordinates": [[
              [114.2, 15.8],
              [114.3, 15.7],
              [114.4, 15.8],
              [114.3, 15.9],
              [114.2, 15.8]
            ]]
          }
        };

        geoJson.features.push(southChinaSeaIslands);

        // 2. 注册地图
        echarts.registerMap('HK', geoJson);

        console.log("geoJson===========", geoJson);

        // 3. 设置配置项
        const option: echarts.EChartsOption = {
          title: {
            // text: '香港人口密度分布',
            left: 'center'
          },
          grid: {
            left: '6%', // 左边距
            right: '6%', // 右边距
            bottom: '-50%', // 底部距离
            top: "0",
          },
          tooltip: {
            trigger: 'item',
            formatter: (params: any) => {
              // 检查数据是否存在，不存在则显示0
              const value = params.data?.value ?? 0;
              return `${params.name}: ${value}人`;
            }
          },
          // toolbox: {
          //   show: true,
          //   feature: {
          //     saveAsImage: {}
          //   }
          // },
          visualMap: {
            min: 0,
            max: 100,
            show: false,
            text: ['低', '高'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#0135A6', '#024BD2', '#1B6DFA', '#8DC4FF', '#BADDFF']
              // color: ['#F5E8FF', '#CFBAFF', '#E3C7FD', '#8C69FF', '#482BD9']
            }
          },
          series: [{
            name: '人口密度',
            type: 'map',
            map: 'HK',
            roam: false,
            zoom: isPc ? 1.5 : 1.2,
            center: [105, 36],
            nameProperty: 'name',
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: '#E0FFFF', // 区域填充色
              borderColor: '#FFFFFF', // 白色边框
              borderWidth: 1 // 边框宽度
            },
            data: data.map(item => ({
              // name: normalizeProvinceName(item.region),
              name: item.region,
              value: item.students || 0
            })) as ProvinceData[]

          }]
        };

        myChart.setOption(option);

        // 4. 响应式调整
        const handleResize = () => myChart.resize();
        window.addEventListener('resize', handleResize);

        return () => {
          window.removeEventListener('resize', handleResize);
          myChart.dispose();
        };
      })
      .catch(error => {
        console.error('加载地图数据失败:', error);
        myChart.hideLoading();
      });
  }, []);

  return (
    <div
      ref={chartRef}
      style={{
        width: '100%',
        height: '400px',
        minWidth: '300px',
        // border: '1px solid #ccc'
      }}
    />
  );
};

export default HongKongMap;